<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.min.js"></script>
<!-- Custom Theme files -->
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<!-- Custom Theme files -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript">
	 addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 
</script>
<!--webfont-->
<link
	href='http://fonts.useso.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
	rel='stylesheet' type='text/css'>
<link href='http://fonts.useso.com/css?family=Dancing+Script:400,700'
	rel='stylesheet' type='text/css'>
<script src="js/jquery.easydropdown.js"></script>
<script src="js/responsiveslides.min.js"></script>
<script>
	$(function() {
		$("#slider").responsiveSlides({
			auto : true,
			nav : true,
			speed : 500,
			namespace : "callbacks",
			pager : true,
		});
	});
</script>

</head>

<body>
	<!-- header-section-starts -->
	<div class="header">
		<div class="top-header">
			<div class="container">
				<div class="header-left">
					<p>欢迎来到沁徽韵</p>
				</div>
				<div class="login-section">
					<ul>
						<li><a href="login.html">Login</a></li> |
						<li><a href="register.html">Register</a></li>
					</ul>
				</div>
				<!-- start search-->
				<div class="search-box">
					<div id="sb-search" class="sb-search">
						<form>
							<input class="sb-search-input"
								placeholder="Enter your search term..." type="search"
								name="search" id="search"> <input
								class="sb-search-submit" type="submit" value=""> <span
								class="sb-icon-search"> </span>
						</form>
					</div>
				</div>
				<!-- search-scripts -->
				<script src="js/classie.js"></script>
				<script src="js/uisearch.js"></script>
				<script>
					new UISearch(document.getElementById('sb-search'));
				</script>
				<!-- //search-scripts -->
				<div class="clearfix"></div>
			</div>
		</div>
		<div class="bottom-header">
			<div class="container">
				<div class="logo">
					<a href="index.html"><h1>sporty</h1></a>
				</div>
				<div class="header_bottom_right">
					<div class="h_menu4">
						<!-- start h_menu4 -->
						<a class="toggleMenu" href="#">Menu</a>
						<ul class="nav">
							<li class="active"><a href="index.html">HOME</a></li>
							<li><a href="products.html" class="root">FOOTBALL</a>
								<ul>
									<li><a href="products.html">Accessories</a></li>
									<li><a href="products.html">Footwear</a></li>
									<li><a href="products.html">t-shirts</a></li>
									<li><a href="products.html">sporty dresses</a></li>
									<li><a href="products.html">balls</a></li>
									<li><a href="products.html">sales</a></li>
								</ul></li>
							<li><a href="bikes.html">BIKES</a>
								<ul>
									<li><a href="bikes.html">Accessories</a></li>
									<li><a href="bikes.html">helmets</a></li>
									<li><a href="bikes.html">Footwear</a></li>
									<li><a href="bikes.html">spets</a></li>
									<li><a href="bikes.html">arms</a></li>
									<li><a href="bikes.html">sales</a></li>
								</ul></li>
							<li><a href="products.html">GOLF</a>
								<ul>
									<li><a href="products.html">Accessories</a></li>
									<li><a href="products.html">Footwear</a></li>
									<li><a href="products.html">Apparel</a></li>
								</ul></li>
							<li><a href="contact.html">CONTACT</a></li>
						</ul>
						<script type="text/javascript" src="js/nav.js"></script>
					</div>
					<!-- end h_menu4 -->
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
	</div>
	<!-- header-section-ends -->
	<!-- content-section-starts -->

	<div class="dreamcrub">
		<div class="container">
			<ul class="breadcrumbs">
				<li class="home"><a href="index.html" title="Go to Home Page"><img
						src="images/home.png" alt="" /></a>&nbsp; <span>&gt;</span></li>
				<li>bikes</li>&nbsp;
				<span>&gt;</span>
				<li>products</a></li>
			</ul>
			<ul class="previous">
				<li><a href="index.html">Back to Previous Page</a></li>
			</ul>
			<div class="clearfix"></div>
		</div>
	</div>
	<div class="container">
		<div class="biseller-info">
			<h3 class="new-models">Sales Models</h3>
			<ul id="flexiselDemo3">
				<li>
					<div class="biseller-column">
						<img src="images/sm1.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="single.html">Quick view</a>
						</div>
						<div class="biseller-name">
							<h4>Sport Bicycle 988</h4>
							<p>$ 139.99</p>
						</div>
						<a href="single.html"><button class="add2cart">
								<i class="white-cart1"></i> <span>| Add to Cart</span>
							</button></a>
					</div>
				</li>
				<li>
					<div class="biseller-column">
						<img src="images/sm3.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="single.html">Quick view</a>
						</div>
						<div class="biseller-name">
							<h4>Classic Bicycle</h4>
							<p>$ 219.99</p>
						</div>
						<a href="single.html"><button class="add2cart">
								<i class="white-cart1"></i> <span>| Add to Cart</span>
							</button></a>
					</div>
				</li>

				<li>
					<div class="biseller-column">
						<img src="images/sm4.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="single.html">Quick view</a>
						</div>
						<div class="biseller-name">
							<h4>Retro Bicycle #2</h4>
							<p>$ 899.99</p>
						</div>
						<a href="single.html"><button class="add2cart">
								<i class="white-cart1"></i> <span>| Add to Cart</span>
							</button></a>
					</div>
				</li>
				<li>
					<div class="biseller-column">
						<img src="images/biscyle1.jpg" alt="" class="veiw-img">
						<div class="veiw-img-mark">
							<a href="single.html">Quick view</a>
						</div>
						<div class="biseller-name">
							<h4>Classic Bicycle</h4>
							<p>$ 219.99</p>
						</div>
						<a href="single.html"><button class="add2cart">
								<i class="white-cart1"></i> <span>| Add to Cart</span>
							</button></a>
					</div>
				</li>
			</ul>
		</div>


		<script type="text/javascript">
			$(window).load(function() {
				$("#flexiselDemo3").flexisel({
					visibleItems : 4,
					animationSpeed : 1000,
					autoPlay : false,
					autoPlaySpeed : 3000,
					pauseOnHover : true,
					enableResponsiveBreakpoints : true,
					responsiveBreakpoints : {
						portrait : {
							changePoint : 480,
							visibleItems : 1
						},
						landscape : {
							changePoint : 640,
							visibleItems : 2
						},
						tablet : {
							changePoint : 768,
							visibleItems : 3
						}
					}
				});

			});
		</script>
		<script type="text/javascript" src="js/jquery.flexisel.js"></script>

		<div class="best-seller">

			<div class="biseller-info">
				<h3 class="new-models">qqq茶q道摄影</h3>
				<ul id="flexiselDemo1">
					<li>
						<div class="biseller-column">
							<img src="images/sm1.jpg" alt="">
							<div class="veiw-img-mark">
								<a href="single.html">Quick view</a>
							</div>
							<div class="biseller-name">
								<h4>Classic Bicycle</h4>
								<p>$ 219.99</p>
							</div>
							<a href="single.html"><button class="add2cart">
									<i class="white-cart1"></i> <span>| Add to Cart</span>
								</button></a>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<img src="images/sm3.jpg" alt="">
							<div class="veiw-img-mark">
								<a href="single.html">Quick view</a>
							</div>
							<div class="biseller-name">
								<h4>Classic Bicycle</h4>
								<p>$ 219.99</p>
							</div>
							<a href="single.html"><button class="add2cart">
									<i class="white-cart1"></i> <span>| Add to Cart</span>
								</button></a>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<img src="images/sm1.jpg" alt="">
							<div class="veiw-img-mark">
								<a href="single.html">Quick view</a>
							</div>
							<div class="biseller-name">
								<h4>Classic Bicycle</h4>
								<p>$ 219.99</p>
							</div>
							<a href="single.html"><button class="add2cart">
									<i class="white-cart1"></i> <span>| Add to Cart</span>
								</button></a>
						</div>
					</li>
					<li>
						<div class="biseller-column">
							<img src="images/sm4.jpg" alt="">
							<div class="veiw-img-mark">
								<a href="single.html">Quick view</a>
							</div>
							<div class="biseller-name">
								<h4>Classic Bicycle</h4>
								<p>$ 219.99</p>
							</div>
							<a href="single.html"><button class="add2cart">
									<i class="white-cart1"></i> <span>| Add to Cart</span>
								</button></a>
						</div>
					</li>
				</ul>
			</div>
		</div>
		<script type="text/javascript">
			$(window).load(function() {
				$("#flexiselDemo1").flexisel({
					visibleItems : 4,
					animationSpeed : 1000,
					autoPlay : true,
					autoPlaySpeed : 3000,
					pauseOnHover : true,
					enableResponsiveBreakpoints : true,
					responsiveBreakpoints : {
						portrait : {
							changePoint : 480,
							visibleItems : 1
						},
						landscape : {
							changePoint : 640,
							visibleItems : 2
						},
						tablet : {
							changePoint : 768,
							visibleItems : 3
						}
					}
				});

			});
		</script>
		<script type="text/javascript" src="js/jquery.flexisel.js"></script>

		<div class="clearfix"></div>
		<div class="shipping">
			<div class="shipping-section-grid">
				<div class="col-md-7 shipping-left-grid">
					<h3>free shipping</h3>
					<div class="icon">
						<img src="images/shipping-icon.png" alt="" />
					</div>
					<div class="icon-text">
						<p>Lorem ipsum is dolor sit suspendise amet latest videos of
							lorem feworem ipsum is dolor sit sud spendi desig sunpoen
							controey feworem ipsum is dolor sit suspendi desig.</p>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="col-md-5 shipping-right-grid">
					<h3>news letter</h3>
					<div class="news-search-box">
						<form>
							<input type="text" class="text" value=""
								onfocus="this.value = '';"
								onblur="if (this.value == '') {this.value = '';}"> <input
								type="submit" value>
						</form>
					</div>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
	</div>
	<!-- content-section-ends -->
	<!-- footer-section-starts -->
	<div class="footer">
		<div class="container">
			<div class="col-md-3 shop">
				<h3>shop</h3>
				<ul>
					<li><a href="#">new arrivals</a></li>
					<li><a href="#">men</a></li>
					<li><a href="#">accessories</a></li>
					<li><a href="#">kids</a></li>
					<li><a href="#">brands</a></li>
					<li><a href="#">trends</a></li>
					<li><a href="#">sale</a></li>
					<li><a href="#">style videos</a></li>
				</ul>
			</div>
			<div class="col-md-3 shop">
				<h3>help</h3>
				<ul>
					<li><a href="#">frequently asked questions</a></li>
					<li><a href="#">women</a></li>
					<li><a href="#">style videos</a></li>
					<li><a href="#">sale</a></li>
					<li><a href="#">trends</a></li>
					<li><a href="#">style videos</a></li>
				</ul>
			</div>
			<div class="col-md-3 shop">
				<h3>account</h3>
				<ul>
					<li><a href="#">my sports</a></li>
					<li><a href="#">my orders</a></li>
					<li><a href="#">my shopping bag</a></li>
					<li><a href="#">my wishlist</a></li>
				</ul>
			</div>
			<div class="col-md-3 shop">
				<h3>popular</h3>
				<ul>
					<li><a href="#">accessories</a></li>
					<li><a href="#">brands</a></li>
					<li><a href="#">frequently asked questions</a></li>
					<li><a href="#">style videos</a></li>
					<li><a href="#">women</a></li>
					<li><a href="#">my orders</a></li>
				</ul>
			</div>
			<div class="clearfix"></div>
			<div class="copy-rights">
				<p>
					Copyright &copy; 2014.Company name All rights reserved.<a
						target="_blank" href="http://www.777moban.com/">777模板</a>
				</p>
			</div>
		</div>
	</div>
	<!-- footer-section-ends -->

</body>
</html>
